<template>
  <el-drawer
    :visible.sync="visible"
    direction="rtl"
    size="60%"
    :close-on-press-escape="false"
    :wrapper-closable="false"
    :show-close="false"
  >
    <template v-slot:title>
      <div class="drawer-header">
        <span>订阅</span>
        <div>
          <el-button icon="el-icon-close" @click="handleClose">
            取消
          </el-button>
          <el-button type="primary" icon="el-icon-check" @click="handleSubmitFormData">
            确认
          </el-button>
        </div>
      </div>
    </template>
    <div class="app-container">
      <!-- 条件搜索 -->
      <div class="filter-container">
        <el-select v-model="listQuery.param.appId" placeholder="所属应用" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilterQuery">
          <el-option v-for="(value, key) in apps" :key="key" :label="value" :value="key" />
        </el-select>
        <el-input v-model="listQuery.param.serviceCode" placeholder="平台编码" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilterQuery" />
        <el-input v-model="listQuery.param.serviceDesc" placeholder="服务描述" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilterQuery" />
        <el-button class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 10px;" @click="handleFilterQuery">
          搜索
        </el-button>
        <el-button class="filter-item" icon="el-icon-refresh-right" @click="handleRestQuery">
          重置
        </el-button>
      </div>
      <div class="filter-container">
        <div style="float: right;">
          <el-button icon="el-icon-refresh" circle @click="handleFilterQuery" />
        </div>
      </div>

      <!-- 数据表格 -->
      <el-table
        :key="tableKey"
        v-loading="loading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        scrollbar-always-on="true"
        @selection-change="handleTableSelection"
      >
        <el-table-column type="selection" width="50px" align="center" />
        <el-table-column label="序号" type="index" width="50px" align="center" />
        <!--按需调整-->
        <el-table-column label="所属应用" min-width="100px" align="center">
          <template v-slot="{row}">
            <span>{{ row.appDesc }}</span>
          </template>
        </el-table-column>
        <el-table-column label="平台编码" min-width="100px" align="center">
          <template v-slot="{row}">
            <span>{{ row.serviceCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="服务名称" min-width="100px" align="center">
          <template v-slot="{row}">
            <span>{{ row.serviceName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="服务描述" min-width="100px" align="center">
          <template v-slot="{row}">
            <span>{{ row.serviceDesc }}</span>
          </template>
        </el-table-column>
        <el-table-column label="租户号" min-width="100px" align="center">
          <template v-slot="{row}">
            <span>{{ row.tenantId }}</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 表格分页 -->
      <pagination :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="handleInit" />
    </div>
  </el-drawer>
</template>

<script>
import { handleSubscribeList } from '../service/api'
import { handleApps } from '../app/api'
import { handleSave } from '../subscribe/api'
import Pagination from '@/components/Pagination/index.vue'

export default {
  name: 'EbApplicationSubscribe',
  components: { Pagination },
  directives: { },
  filters: {},
  props: {
    subData: {
      type: Object,
      require: true,
      default: undefined
    }
  },
  data() {
    return {
      // 列表table的key
      tableKey: 0,
      // 遮罩层
      loading: true,
      // table数据对象
      list: [],
      // 总条数
      total: 0,
      // table条件查询对象
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        // sort: '+id',
        param: {
          // 按需调整
          id: undefined,
          appId: undefined,
          serviceCode: undefined,
          serviceDesc: undefined,
          tenantId: undefined,
          remark: undefined,
          status: undefined
        }
      },
      apps: [],
      // 是否显示弹出层
      visible: false,
      // 表单数据对象
      formData: {},
      selections: []
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 查询table数据对象
    handleInit() {
      this.visible = this.subData.visible
      handleApps().then(res => {
        this.apps = res.data
      })
      this.loading = true
      this.listQuery.param.remark = this.subData.appId
      handleSubscribeList(this.listQuery).then(res => {
        this.list = res.data
        if (res.total) {
          this.total = Number(res.total)
        }
        this.loading = false
      })
    },
    // 条件查询table数据
    handleFilterQuery() {
      this.listQuery.pageNum = 1
      this.handleInit()
    },
    // 重置table查询条件
    handleRestQuery() {
      // 按需调整
      this.listQuery.param.appId = undefined
      this.listQuery.param.serviceCode = undefined
      this.listQuery.param.serviceDesc = undefined
      this.listQuery.param.status = undefined
      this.listQuery.param.tenantId = undefined
    },
    // table 选中
    handleTableSelection(selection) {
      this.selections = selection
    },
    // 表单提交
    handleSubmitFormData() {
      if (this.selections.length === 0) {
        this.handleClose()
        return
      }
      const arr = []
      this.selections.forEach((obj) => {
        const o = {}
        o.appId = this.subData.appId
        o.appDesc = this.subData.appDesc
        o.serviceCode = obj.serviceCode
        o.serviceName = obj.serviceDesc
        o.serviceDesc = obj.serviceName
        o.status = 'Y'

        arr.push(o)
      })

      handleSave(arr).then((res) => {
        this.handleRestQuery()
        this.visible = false
        this.$message({
          showClose: true,
          message: res.msg,
          type: 'success',
          duration: 4000
        })
        // 这里要刷新父页面的列表
        this.$parent.handleFilterQuery()
      })
    },
    // 关闭弹出层
    handleClose() {
      this.visible = false
    }
  }
}
</script>
